import { Logo } from "./logo";
import { Nav } from "./nav";
import { Search } from "./search";
import tpl from "./index.tpl";
import { tplReplace } from "@/utils/tools";
import "./index.less";

export class Header {
  constructor(el, fieldDatas, phoneDatas) {
    this.name = "header";
    this.$el = el;

    this.fieldDatas = fieldDatas;
    this.phoneDatas = phoneDatas;

    this.logo = new Logo();
    this.nav = new Nav();
    this.search = new Search();
  }

  // 组件初始化
  async init() {
    // 需要组件渲染完毕才能绑定事件
    await this.render();
    this.bindEvent();
  }

  // 渲染组件
  async render() {
    await this.$el.append(
      tplReplace(tpl(), {
        logo: this.logo.tpl(),
        nav: this.nav.tpl(this.fieldDatas),
        search: this.search.tpl()
      })
    );
  }

  bindEvent() {
    const $nav = $(".J_nav"),
          $searchBtn = $('#J_searchBtn');

    // jquery的on方法第三个参数可传一个数据
    $nav.on(
      "mouseenter",
      ".nav-item",
      { phoneDatas: this.phoneDatas, oNav: this.nav },
      this.nav.navMouseIn
    );

    $searchBtn.on('click', this.search.searchPhone);
  }
}
